<template>
  <view>
    <nut-tabs v-model="tab1value" @click="changeTab">
      <nut-tabpane title="热销榜" style="width: 100%">
        <simple-tabs :items="protoRankTabs" :value="productRankQuery.type" @tab-change="onTabChange" />
        <view v-if="tab1value === 0 && protoRankItems && protoRankItems.length">
          <view v-for="proto in protoRankItems" :key="proto.id">
            <view
              class="my-2"
              style="display: flex; flex-direction: row"
              @click="Taro.navigateTo({ url: `/pages/proto/detail/index?id=${proto.id}` })"
            >
              <image
                mode="aspectFit"
                :src="proto.cover"
                style="max-width: 120px; max-height: 110px; border-radius: 10px"
              />
              <view class="pl-2">
                <view>
                  <text class="proto-rank-title"> {{ proto.title }}</text>
                </view>
                <view class="content-text mt-1">
                  <text
                    >昨日销量
                    <text style="color: #fa2c19">{{ proto.sales }}</text>
                  </text>
                  <text class="pl-2"
                    >累计销量
                    <text style="color: #fa2c19">{{ proto.sales }}</text>
                  </text>
                </view>
                <view class="content-text">
                  <view
                    >商品售价 ¥
                    <money style="font-weight: bold" :value="proto.price" />
                  </view>
                  <view class="dpr-center-sb">
                    <text
                      >佣金比
                      <text style="font-size: 16px; color: #fa2c19; font-weight: bold"
                        >{{ `${proto.commission_ratio}%` }}
                      </text>
                    </text>
                    <nut-button size="small" type="primary"
                      >赚 ¥
                      <money style="font-weight: bold; font-size: 16px" :value="proto.commission" />
                    </nut-button>
                  </view>
                </view>
              </view>
            </view>
            <empty-line height="1" />
          </view>
        </view>
      </nut-tabpane>
      <nut-tabpane title="达人榜">
        <mark-card v-if="tab1value === 1" title="抖音销售榜">
          <view v-for="i in 10" :key="i">
            <nut-row class="dpr-center-start my-4">
              <nut-col :span="6">
                <nut-avatar
                  size="63"
                  url="https://p9-aio.ecombdimg.com/obj/ecom-shop-material/BYoXabQo_m_b4a84db15f68b5f78a008216003e3ecb_sx_169710_www801-801"
                />
              </nut-col>
              <nut-col :span="18">
                <view class="dpr-center-sb full-width">
                  <view class="dpc-center-start pl-1">
                    <view style="font-size: 18px" class="dpr-center-start">
                      <text class="pr-1">刘妈妈AKD</text>
                      <nut-icon class-prefix="icon" size="19" font-class-name="iconfont" name="icon_TikTok-square" />
                    </view>
                  </view>
                  <nut-tag color="#f5f5f5" text-color="#909090" style="font-size: 11px">广州</nut-tag>
                </view>
                <view class="mt-3 pl-1">
                  <nut-tag text-color="#fff" :color="'#577eff'">
                    <nut-icon
                      class-prefix="icon"
                      color="#fff"
                      size="13"
                      font-class-name="iconfont"
                      name="paihangbang2"
                    />
                    <text class="ml-1">1003次</text>
                  </nut-tag>
                  <nut-tag type="danger" class="mx-1">
                    <nut-icon class-prefix="icon" color="#fff" size="12" font-class-name="iconfont" name="hot" />
                    <text class="ml-1">20W</text>
                  </nut-tag>
                </view>
              </nut-col>
            </nut-row>
            <empty-line height="1" />
          </view>
        </mark-card>
      </nut-tabpane>
    </nut-tabs>
  </view>
</template>

<script setup lang="ts">
import './index.less';
import { ref } from 'vue';
import Taro, { useLoad } from '@tarojs/taro';
import MarkCard from '@/components/mark-card/index.vue';
import { getProtoListApi, ProtoType } from '@/api/proto';
import EmptyLine from '@/components/empty-line/index.vue';
import Money from '@/components/money/index.vue';
import SimpleTabs from '@/components/simple-tabs/index.vue';

const container = ref(null);
const tab1value = ref(0);
const changeTab = () => {
  console.log(tab1value);
};
const protoRankItems = ref<ProtoType[]>();
const productRankQuery = ref({
  type: 1,
});

const protoRankTabs = ref([
  { id: 1, name: '昨日热销' },
  { id: 7, name: '7日热销' },
  { id: 30, name: '30日热销' },
]);
const getProductRank = () => {
  getProtoListApi({ page: 1, limit: 30 }).then((res) => {
    protoRankItems.value = res.result.items;
  });
};
const onTabChange = (tab) => {
  productRankQuery.value.type = tab.id;
  getProductRank();
};
useLoad(() => {
  getProductRank();
});
</script>

<style lang="less" scoped></style>
